<template>
	<view>
		<uni-card :title="userFavority.purposeLocation" @click="detailFavority(userFavority.id)" v-for="(userFavority,index) in userFavoritiesList" :key="index">
						<u--image :src="userFavority.activityImagePath.imgSrc"  height="300rpx"></u--image>
						<view class="activityName u-line-2">
							<text class="uni-body">{{userFavority.activityName}}\n</text>
						</view>
						<view class="activityPrice">
							<text class="uni-body">￥{{userFavority.price}}</text>
						</view>
					</uni-card>
	

	<!-- 内容为空 -->
	<u-empty v-if="userFavoritiesList.length==0" mode="favor">
	</u-empty>
	
	<!-- 遮罩层 -->
	<u-overlay :show="toLoding" mask-click-able="false">
		<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
	</u-overlay>
	</view>	
	
	
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userFavoritiesList:[],
				favQuery: {
					page:1,
					pageSize:5,//一次展示五个收藏
					userId: null
				},
				totalNum:0,
				toLoding:false
			}
		},
		onReachBottom:function () {
			if(this.favQuery.page*this.favQuery.pageSize>=this.totalNum){
				return uni.showToast({
					title:"数据已经到底了",
					icon:'error'
				})
			}else{
				this.favQuery.page+=1;
				this.loadFavority()
			}
			
		},
		methods: {
			// 根据活动id跳转到具体收藏活动界面
			detailFavority(activityId){
				uni.navigateTo({
					url: '/subpkg/detailLine/detailLine?activityId=' + activityId
				})
			},
			async loadFavority(){
				this.toLoding=true
				this.favQuery.userId = this.userInfo.data.data.id
				await uni.$u.http.post("/user/activity/collection/list",this.favQuery, {
					custom: {
						auth: true
					}
				}).then(userFavorities=>{
					// userFavorities.data.data.records是获取用户收藏
					this.totalNum=userFavorities.data.data.total//记录总条数
					this.userFavoritiesList=[...this.userFavoritiesList,...userFavorities.data.data.records]
				}).catch(error=>{
					return uni.showToast({
						title:"请求错误",
						icon:'error'
					})
				}).finally(()=>{
					this.toLoding=false
				})
				
			}
		},
		 beforeMount() {
			this.loadFavority()
		},
		computed:{
			...mapState('m_user', ['token', 'userInfo']),
		}
	}
</script>

<style lang="scss">

.activityPrice{
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	font-size: 50rpx;
	float: right;
}
.activityName{
	font-size: large;
	margin-top: 10rpx;
}
</style>
